<template>
  <div>
    <a-card title="个人信息修改" :bordered="false">
      <div>
        <a-tabs defaultActiveKey="1" :tabPosition="tabPosition">
          <a-tab-pane tab="个人信息" key="1">
            <div >
              <a-row :gutter="12">
                <a-col :md="12" :sm="24">
                  <a-form :form="infoForm">
                    <a-form-item
                      :required="true"
                      label="学生学号"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                    >
                      <a-input v-decorator="['studentCode', {initialValue: student.studentCode}]" disabled ></a-input>
                    </a-form-item>
                    <a-form-item
                      label="学生姓名"
                      :required="true"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                    >
                      <a-input v-decorator="['studentName', {initialValue: student.studentName}]" ></a-input>
                    </a-form-item>
                    <a-form-item
                      label="学生角色"
                      :required="true"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                    >
                      <a-select v-decorator="['roleId', {initialValue: String(student.roleId), rules: [{required: true, message: '请选择角色'}]}]" placeholder="请选择" disabled>
                        <a-select-option v-for="role in roles" :key="role.id">{{ role.name }}</a-select-option>
                      </a-select>
                    </a-form-item>
                    <a-form-item
                      label="所属班级"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                    >
                      <a-select
                        allowClear
                        v-decorator="['classId', {initialValue: student.classId, rules: [{required: true, message: '请选择班级'}]}]"
                        placeholder="请选择"
                      >
                        <a-select-option v-for="newClass in classes" :key="newClass.classId">{{ newClass.className }}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-form>
                </a-col>
              </a-row>
              <a-form-item>
                <a-button type="primary" @click="submitInfo" style="margin-left: 150px">提交</a-button>
              </a-form-item>
            </div>
          </a-tab-pane>
          <a-tab-pane tab="修改密码" key="2">
            <div class="table-page-search-wrapper" >
              <a-row :gutter="12">
                <a-col :md="12" :sm="24">
                  <a-form :form="pwdForm">
                    <a-form-item
                      label="输入密码"
                      :labelCol="newLabelCol"
                      :wrapperCol="newWrapperCol"
                    >
                      <a-input-password
                        v-decorator="['studentPwd', {rules: [
                        { required: true, message: '请输入登录密码', trigger: 'blur' },
                        { validator: validatePwd, trigger: 'blur' }]}]" />
                    </a-form-item>
                    <a-form-item
                      label="确认密码"
                      :labelCol="newLabelCol"
                      :wrapperCol="newWrapperCol"
                    >
                      <a-input-password
                        v-decorator="['confirmPwd', {rules: [
                        { required: true, message: '请再次确认密码', trigger: 'blur' },
                        { validator: confirmPwd, trigger: 'blur' }]}]" />
                    </a-form-item>
                  </a-form>
                </a-col>
              </a-row>
              <a-form-item>
                <a-button type="primary" @click="submitPwd" style="margin-left: 150px">提交</a-button>
              </a-form-item>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>
<script>
import { listRole } from '@/api/system/role'
import { listClass } from '@/api/basic/classes'
import { getInfo, editStudent, resetPwd } from '@/api/basic/student'
export default {
  data () {
    return {
      tabPosition: 'left',
      // 表单对象
      student: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      newLabelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      newWrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      infoForm: this.$form.createForm(this),
      pwdForm: this.$form.createForm(this),
      // 角色对象
      roles: [],
      // 班级对象
      classes: []
    }
  },
  created () {
    // 获取学生信息
    getInfo()
      .then(res => {
        this.student = res.result
      })
    // 用户角色列表
    listRole()
      .then(res => {
        if (res.message !== 'error') {
          this.roles = res.result
        } else {
          this.$message.error('操作失败！')
        }
      })
    // 班级列表
    listClass()
      .then(res => {
        if (res.message !== 'error') {
          this.classes = res.result
        } else {
          this.$message.error('操作失败！')
        }
      })
  },
  methods: {
    // 前端验证手机号码
    validatePhone (rule, value, callback) {
      const reg = /^[1][3-9][0-9]{9}$/
      if (value === '' || value === undefined || value === null) {
        callback()
      } else {
        if ((!reg.test(value)) && value !== '') {
          callback(new Error('请输入正确的电话号码'))
        } else {
          callback()
        }
      }
    },
    // 前端验证邮箱
    validateEmail (rule, value, callback) {
      const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (value === '' || value === undefined || value === null) {
        callback()
      } else {
        if (!reg.test(value)) {
          callback(new Error('请输入正确的邮箱'))
        } else {
          callback()
        }
      }
    },
    // 个人信息提交
    submitInfo () {
      const { infoForm: { validateFields } } = this
      validateFields((errors, values) => {
        if (!errors) {
          editStudent(Object.assign(values, { 'studentId': this.student.studentId }))
            .then(res => {
              if (res.message !== 'error') {
                this.$emit('ok')
                this.$message.success('修改成功！')
              } else {
                this.$message.error('操作失败！')
              }
            })
        } else {
        }
      })
    },
    // 密码提交
    submitPwd () {
      const { pwdForm: { validateFields } } = this
      validateFields((errors, values) => {
        if (!errors) {
          resetPwd(Object.assign(values, { 'studentId': this.student.studentId }))
            .then(res => {
              if (res.message !== 'error') {
                this.$message.success('密码重置成功！')
              } else {
                this.$message.error('操作失败！')
              }
            })
        } else {
        }
      })
    },
    // 前端验证密码
    validatePwd (rule, value, callback) {
      const regex = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,}$/
      if (value === '' || value === undefined || value === null) {
        callback()
      } else {
        if (regex.test(value)) {
          return callback()
        } else {
          return callback(new Error('大写字母，小写字母，数字，特殊符号四选三，长度至少8位'))
        }
      }
    },
    // 前端两次密码是否一致
    confirmPwd (rule, value, callback) {
      if (value === '' || value === undefined || value === null) {
        callback()
      } else {
        if (this.pwdForm.getFieldValue('studentPwd') === value) {
          return callback()
        } else {
          return callback(new Error('请确保两次密码输入一致'))
        }
      }
    }
  }
}
</script>
